<script setup lang="ts">
import { onMounted, shallowRef } from 'vue'
import UserBar from './components/UserBar.vue'
import UserInf from './components/UserInf.vue'
import VisitsChart from './components/VisitsChart.vue'
import TodoCalendar from './components/TodoCalendar.vue'
import SysLog from './components/SysLog.vue'
import SysNotice from './components/SysNotice.vue'
import FriendlyLinks from './components/FriendlyLinks.vue'
import { GridStack } from 'gridstack'
import 'gridstack/dist/gridstack.min.css'

// let grid = null

const components = shallowRef([
  { x: 0, y: 0, w: 4, h: 6, i: '0', component: UserBar },
  { x: 2, y: 0, w: 4, h: 6, i: '1', component: UserInf },
  { x: 4, y: 0, w: 4, h: 12, i: '2', component: TodoCalendar },
  { x: 6, y: 0, w: 8, h: 6, i: '3', component: VisitsChart },
  { x: 8, y: 0, w: 4, h: 6, i: '4', component: SysLog },
  { x: 10, y: 0, w: 4, h: 6, i: '5', component: SysNotice },
  { x: 0, y: 5, w: 4, h: 6, i: '6', component: FriendlyLinks },
])

onMounted(() => {
  GridStack.init({
    float: true,
    cellHeight: '70px',
    minRow: 1,
  })

  // if (grid) {
  //   grid.on('dragstop', (event: Event, element: { gridstackNode: any }) => {
  //     console.log('move event!', event, element)
  //     const node = element.gridstackNode
  //     info.value = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`
  //   })
  // }
})
</script>

<template>
  <div class="p-welcome h-full w-full">
    <el-scrollbar wrap-class="scrollbar-wrapper h-full">
      <div class="overflow-hidden">
        <div style="margin: -5px">
          <section class="grid-stack" :gs-current-row="4">
            <div
              v-for="(i, index) in components"
              :key="'component' + index"
              :gs-id="index"
              class="grid-stack-item"
              data-gs-no-move="yes"
              data-gs-no-resize="yes"
              :gs-x="i.x"
              :gs-y="i.y"
              :gs-h="i.h"
              :gs-w="i.w"
              gs-auto-position="true"
            >
              <div class="grid-stack-item-content bg-white">
                <component :is="i.component" />
              </div>
            </div>
          </section>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<style>
.grid-stack .grid-stack-item > .grid-stack-item-content {
  background-color: #fff;
  inset: 4px !important;
}

.grid-stack .grid-stack-item > .ui-resizable-ne,
.grid-stack .grid-stack-item > .ui-resizable-nw,
.grid-stack .grid-stack-item > .ui-resizable-se,
.grid-stack .grid-stack-item > .ui-resizable-sw {
  transform: none;
  background-size: contain;
  background-image: url('');
}
</style>
